<template>
  <div class="banner">
    <el-carousel v-bind="options" @change="swiperChange">
      <el-carousel-item v-for="item in list" :key="item.id">
        <div
          class="relative w-full h-full bg-black"
          v-if="isVideo(item.infoPicUrl)"
        >
          <video
            muted
            :src="item.infoPicUrl"
            class="w-full h-full"
            @play="autoPlay = false"
            controls
          ></video>
        </div>

        <img
          v-else
          :src="item.infoPicUrl"
          class="w-full h-full object-fill"
          :class="{ 'cursor-pointer': item.openUrl }"
          alt=""
          @click="openLink(item)"
        />
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

<script setup>
import { useBanner, useNewsList } from "@/hooks";
const { options, autoplay } = useBanner();

const { list } = useNewsList({ pageSize: 5, infoType: 1 });

const router = useRouter();
const openLink = (item) => {
  if (item.openType === 1 && item.openUrl) {
    window.open(item.openUrl);
  }
  if (item.openType === 2) {
    router.push({
      name: "NewsDetail",
      query: { id: item.id, hiddenFooter: true },
    });
  }
};

const swiperChange = () => {
  autoplay.value = true;
};

const isVideo = computed(() => {
  return (url) => url.endsWith(".mp4");
});
</script>
